<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>服务消费方测试</title>
<link rel="stylesheet" type="text/css" href="../../../css/reset.css">
<link rel="stylesheet" type="text/css" href="../../../css/css.css" />
<link rel="stylesheet" type="text/css"
	href="../../../js/jquery-easyui-1.4.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="../../../js/jquery-easyui-1.4.3/themes/icon.css">
<link rel="stylesheet" type="text/css"
	href="../../../css/colorReset.css" />
<style type="text/css">
.main {
	overflow: hidden;
}

.icons4audit {
	display: inline-block;
	width: 16px;
	height: 18px;
	vertical-align: top;
	overflow: hidden;
	background-image: url('../../../images/icons/audit.png');
}

.icons4unaudit {
	display: inline-block;
	width: 16px;
	height: 18px;
	vertical-align: top;
	overflow: hidden;
	background-image: url('../../../images/icons/unaudit.png');
}

.tree-file {
	display: inline-block;
	width: 16px;
	height: 18px;
	vertical-align: top;
	overflow: hidden;
	background-image: url('../../../images/icons/audit.png');
}

.left_menu {
	float: left;
	width: 22%;
	min-height: 410px;
	/*border:1px solid #95B8E7;*/
	background-color: #FFFFFF;
	overflow: hidden;
}

.tree_con {
	min-height: 340px;
	overflow: auto;
	margin: 0 auto;
	padding-top: 10px;
}

.menu_tit {
	margin-bottom: 0;
}

.search-con {
	background: #f0fbff;
	border-bottom: 1px solid #d1d8de;
	padding: 5px 0;
	line-height: 26px;
}

.search-con .text {
	width: 110px;
	height: 20px;
	line-height: 20px;
	border-radius: 0;
}

.left_menu .text {
	/*border: 1px solid #95B8E7;*/
	border: 1px solid #d3d8d9;
	padding: 2px 3px;
}

.right_con {
	float: right;
	width: 77%;
	min-height: 410px;
	position: relative;
	/*border:1px solid #95B8E7;*/
	background-color: #FFFFFF;
}

.right_con .menu_tit {
	text-align: left;
	padding: 0 0 0 10px;
}

.right_con table tr.table_tr {
	margin: 20px auto;
	width: 775px;
	overflow: hidden;
	padding: 2px 3px;
}

.right_con table tr td.table_td_left {
	width: 120px;
	align: left;
	padding: 2px 3px;
}

.right_con table tr td.table_td_right {
	width: 100% -120px;
	align: left;
	padding: 2px 3px;
}

.div_left {
	float: right;
	align: right;
	width: 100%;
	padding: 2px 3px;
}

.div_right {
	float: left;
	width: 100%;
	text-align: left;
	padding: 2px 3px;
}

.easyui-validatebox text {
	align: left;
}

.right_con ul {
	margin: 10px auto;
	width: 775px;
	overflow: hidden;
}

.right_con ul li {
	width: 380px;
	display: block;
	float: left;
	height: 35px;
	overflow: hidden;
	padding: 5px 0;
}

.right_con ul li.li_col {
	width: 775px;
	height: auto;
}

.right_con .text {
	width: 156px;
	/*border: 1px solid #95B8E7;*/
	border: 1px solid #d3d8d9;
	padding: 2px 3px;
}

.right_con .label {
	width: 120px;
	text-align: right;
	display: block;
	float: right;
	line-height: 25px;
}

.right_con .input_con {
	/* float: none; */
	widht: 100%;
	align: center;
}

.onSave {
	margin: 20px auto 0 auto;
	display: block;
	width: 100px;
}

.tree-node-selected {
	background: #ffe48d;
	color: #000000;
}

.right_mask {
	position: absolute;
	background-color: #FFFFFF;
	height: 100%;
	width: 100%;
	left: 0;
	bottom: 0;
	z-index: 10000;
	filter: alpha(opacity = 10);
	opacity: 0.1;
}

#progressbar {
	display: none;
	position: absolute;
	left: 0;
	bottom: 0;
	height: 100%;
	width: 100%;
	opacity: 0.6;
	filter: alpha(opacity = 60);
	background-color: #ffffff;
	/*background-color:#979797;*/
	z-index: 100;
}

#progressbar_tips {
	display: none;
	line-height: 30px;
	font-size: 16px;
	color: #000000;
	font-weight: bold;
	position: absolute;
	left: 0;
	bottom: 0;
	height: 100%;
	width: 100%;
	z-index: 101;
}

#progressbar_tips p {
	padding: 0 0 0 295px;
}

#progressbar_tips img {
	display: block;
	margin: 50px auto 0 auto;
	width: 50px
}

.table_add {
	/* max-height: 160px; */
	/* width: 405px; */
	overflow-y: auto;
}

input[type="text"] {
	font-family: 微软雅黑;
}

#txtResult {
	word-break: break-all;
}
</style>

</head>

<body>

	<div id="progressbar"></div>
	<div id="progressbar_tips">
		<img src="../../../images/progressbar.gif" alt="" />
		<p style="text-align: center; padding: 0;">
			测试连接中，请稍候<span id="progressbar_point"></span>
		</p>
	</div>

	<div class="main">
		<div class="left_menu">
			<div class="menu_tit">领域系统结构</div>
			<div class="hidden search-con">
				<label for="systemName" style="margin-left: 10px;" class="fl">名称：</label>
				<input id="systemName" name="systemName" class="text fl" /> <a
					href="javascript:void(0);" id="searchNode" name="searchNode"
					class="default_btn fl" style="width: 60px; display: block">定位</a>
			</div>
			<div class="tree_con">
				<ul id="tt"></ul>
			</div>
		</div>

		<div class="right_con table_add ">
			<div class="menu_tit">接口基本信息</div>
			<!-- <div class="right_mask"></div> -->
			<input type="text" id="txtAuthType" name="txtAuthType"
				style="display: none" /> <input type="text" id="txtInterfaceCode"
				name="txtInterfaceCode" style="display: none" /> <input type="text"
				id="txtInterfaceVersion" name="txtInterfaceVersion"
				style="display: none" /> <input type="text" id="txtInterfaceType"
				name="txtInterfaceType" style="display: none" /> <input type="text"
				id="txtRequest" name="txtRequest" style="display: none" /> <input
				type="text" id="txtDataFormate" name="txtDataFormate"
				style="display: none" /><input type="text" id="txtInterfaceId"
				name="txtInterfaceId" style="display: none" /><input type="text"
				id="txtContentType" name="txtContentType" style="display: none" /><input
				type="text" id="txtSystemCode" name="txtSystemCode"
				style="display: none" /><input type="text" id="txtVersion"
				name="txtVersion" style="display: none" /><input type="text"
				id="txtCallSystemCode" name="txtCallSystemCode"
				style="display: none" /><input type="text" id="txtOperationType"
				name="txtOperationType" style="display: none" /><input type="text"
				id="txtSoapActionUri" name="txtSoapActionUri" style="display: none" />
			<textarea id="txtRequestMessId" name="txtRequestMessId"
				style="display: none"></textarea>
			<table>
				<tr class="table_tr">
					<td class="table_td_left"><label for="txtInterfaceName"
						class="label">接口名称：</label></td>
					<td class="table_td_right"
						style="padding-left: 5px; text-align: left;"><label
						id="txtInterfaceName" style=""></label></td>
				</tr>
				<tr class="table_tr">
					<td><div class="div_left">
							<label for="txtAreaParameters" class="label">请求参数：</label>
						</div></td>
					<td><div class="div_right">
							<input type="text" name="comboxParameterModel"
								id="comboxParameterModel" class="text" />
						</div></td>
				</tr>
				<tr class="table_tr">
					<td><div class="div_left">
							<label for="txtAreaParameters" class="label"> </label>
						</div></td>
					<td><div class="div_right" id="divDatagrid"
							style="position: relative;">
							<table id="datagrid" style="width: 540px; height: 100px;"
								data-options="fitColumns:true,toolbar:'#toolbox'">
							</table>
							<img src="../../../images/tuozhuai.jpg" draggable="false"
								ondrag="return false;" id="demo2"
								style="width: 17px; height: 17px; position: absolute; background-color: silver; position: absolute; bottom: 2px; right: 11px" />
						</div>
						<div class="div_right" id="divTextArea">
							<textarea id="txtAreaSelfDefineParameter"
								name="txtAreaSelfDefineParameter"
								style="width: 540px; height: 100px" rows="3"
								class="textarea easyui-validatebox"></textarea>
						</div></td>
				</tr>
				<tr class="table_tr">
					<td><div class="div_left">
							<label for="txtApplyKey" class="label">调用方系统：</label>
						</div></td>
					<td><div class="div_right">
							<input type="text" name="comboxCallSystem" id="comboxCallSystem"
								class="text" /><a
								style="padding-left: 10px; vertical-align: bottom;"
								href="javascript:void(0)" onclick="accApply();">服务接入申请>></a>
						</div></td>
				</tr>
				<tr class="table_tr">
					<td><div id="div4ApplyKey" class="div_left">
							<label for="txtApplyKey" class="label">服务密钥：</label>
						</div></td>
					<td><div class="div_right">
							<input id="txtApplyKey" name="txtApplyKey" style="width: 430px;"
								readonly="readonly" class="easyui-validatebox text" />
						</div></td>
				</tr>
				<tr class="table_tr">
					<td>
						<div id="div4AccessToken" class="div_left" style="display: none;">
							<label for="txtAccessToken" class="label">访问令牌：</label>
						</div>
					</td>
					<td><div class="div_right">
							<input id="txtAccessToken" style="width: 430px; display: none;"
								name="txtAccessToken" readonly="readonly"
								class="easyui-validatebox text" />
							<button id="btnAquiredToken" onClick="onAquiredToken()"
								style="display: none;">获取令牌</button>
						</div></td>
				</tr>
				<tr class="table_tr">
					<td><div class="div_left">
							<label for="txtPubUrl" class="label">接口请求地址：</label>
						</div></td>
					<td><div class="div_right">
							<input id="txtPubUrl" name="txtPubUrl" onblur="paraOnblur();"
								onfocus="paraOnfocus();" style="width: 530px;"
								class="easyui-validatebox text" />
						</div></td>
				</tr>
				<tr class="table_tr" id="trParameter4Sended">
					<td><div class="div_left">
							<label for="txtParameter4Sended" class="label">请求参数报文数据：</label>
						</div></td>
					<td><div class="div_right" style="position: relative;">
							<textarea id="txtParameter4Sended" name="txtParameter4Sended"
								style="width: 540px;" rows="8"
								class="textarea easyui-validatebox"></textarea>
							<img src="../../../images/tuozhuai.jpg" draggable="false"
								ondrag="return false;" id="demo"
								style="width: 17px; height: 17px; position: absolute; background-color: silver; position: absolute; bottom: 2px; right: 9px" />
						</div></td>
				</tr>
				<tr class="table_tr" align="center">
					<td colspan="2" align="center"><div>
							<button id="instance_test" onClick="consumerTest()"
								class=" easyui-linkbutton default_btn"
								style="padding-bottom: 20px; outline: none;">测试</button>
						</div></td>
					<td></td>
				</tr>
				<tr class="table_tr" height="80%">
					<td valign="top"><div class="div_left">
							<label for="txtResult" class="label">返回结果：</label>
						</div></td>
					<td><div class="div_right"
							style="height: auto; width: 540px; border-top: 1px solid gray;">
							<label id="txtResult"
								style="word-break: break-all; word-wrap: break-word; display: block; width: 540px;"></label>
						</div></td>
				</tr>
			</table>
		</div>

	</div>
	<script type="text/javascript" src="/webjars/json3/3.3.2/json3.min.js"></script>
	<script type="text/javascript"
		src="../../../js/jquery-easyui-1.4.3/jquery.min.js"></script>
	<script type="text/javascript"
		src="../../../js/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
	<script type="text/javascript"
		src="../../../js/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>
	<script type="text/javascript" src="../../../js/cook/constants.js"></script>
	<script type="text/javascript" src="../../../js/cook/public.js"></script>
	<script type="text/javascript" src="../../../js/cook/FormValidate.js"></script>
	<script type="text/javascript"
		src="../../../js/esb/ServiceTest/ServiceConsumerTesting.js"></script>
	<script type="text/javascript"
		src="../../../js/esb/ServiceTest/ServiceTestCommon.js"></script>
	<script type="text/javascript">
	function dragable(id){
		var d=document,
		o=d.getElementById(id),
		s=o.style,x,y,
		p='onmousemove';
		o.onmousedown=function(e){
				e=e||event;x=e.clientX-o.offsetLeft;y=e.clientY-o.offsetTop;
				d[p]=function(e){
					e=e||event;/*s.left=e.clientX-x+'px';*/
					var textarea = document.getElementById("txtParameter4Sended"); 
					var height = e.clientY-y;
					if(height > 0)
					{
						//s.top=height +'px'; 
						textarea.style.height = height + 12 +"px";
					}
					
					};
					d.onmouseup=function(){d[p]=null}
					}
		}
	dragable("demo");
	
	 function dragable2(id){
		var d=document,
		o=d.getElementById(id),
		s=o.style,x,y,
		p='onmousemove';
		var isMoving = false;
		o.onmousedown = function(e) {
			e=e||event;
			x=e.clientX-o.offsetLeft;
			y=e.clientY-o.offsetTop;
			isMoving = true;
		};
		o.onmousedown=function(e){
				e=e||event;x=e.clientX-o.offsetLeft;y=e.clientY-o.offsetTop;
				d[p]=function(e){
					e=e||event;/*s.left=e.clientX-x+'px';*/
					//var textarea = document.getElementById("datagrid"); 
					var height = e.clientY-y;
					if(height > 27)
					{
						//s.top=height +'px'; 
						//textarea.style.height = height + 12.5 +"px";
						$("#datagrid").datagrid("resize", {height: height + 12.5});
					}
					
					};
					d.onmouseup=function(){d[p]=null}
					}
		}
	dragable2("demo2");
		$(".left_menu, .right_con").css("height",
				($("body").height() - 25) + "px");
		$(".tree_con").css("height", ($("body").height() - 95) + "px");
	</script>
</body>
</html>